<template>
	<div class="layer">
		<div class="layer-header">
			<div>图层</div>
		</div>
		<div class="layer-body">
			<el-scrollbar height="100%">
				<el-tree
					:allow-drop="allowDrop"
					:allow-drag="allowDrag"
					:data="data"
					draggable
					default-expand-all
					node-key="id"
					@node-drag-start="handleDragStart"
					@node-drag-enter="handleDragEnter"
					@node-drag-leave="handleDragLeave"
					@node-drag-over="handleDragOver"
					@node-drag-end="handleDragEnd"
					@node-drop="handleDrop"
					class="layer-tree"
				/>
			</el-scrollbar>
		</div>
	</div>
</template>

<script lang="ts">
import {
	defineComponent,
	reactive,
	toRefs,
	ref,
	unref,
	onMounted,
	onUnmounted,
} from "vue";

export default defineComponent({
	components: {},
	setup(props: any, context: any) {
		const options = {};
		const refs = {};
		// reactive 数据双向绑定
		const state: any = reactive({
			data: [
				{
					label: "Level one 1",
					children: [
						{
							label: "Level two 1-1",
							children: [
								{
									label: "Level three 1-1-1",
								},
							],
						},
					],
				},
				{
					label: "Level one 2",
					children: [
						{
							label: "Level two 2-1",
							children: [
								{
									label: "Level three 2-1-1",
								},
							],
						},
						{
							label: "Level two 2-2",
							children: [
								{
									label: "Level three 2-2-1",
								},
							],
						},
					],
				},
				{
					label: "Level one 3",
					children: [
						{
							label: "Level two 3-1",
							children: [
								{
									label: "Level three 3-1-1",
								},
							],
						},
						{
							label: "Level two 3-2",
							children: [
								{
									label: "Level three 3-2-1",
								},
							],
						},
					],
				},
			],
			defaultProps: {
				children: "children",
				label: "label",
			},
		});
		// 方法
		const methods = {
			handleDragStart(node, ev) {
				console.log("drag start", node);
			},
			handleDragEnter(draggingNode, dropNode, ev) {
				console.log("tree drag enter: ", dropNode.label);
			},
			handleDragLeave(draggingNode, dropNode, ev) {
				console.log("tree drag leave: ", dropNode.label);
			},
			handleDragOver(draggingNode, dropNode, ev) {
				console.log("tree drag over: ", dropNode.label);
			},
			handleDragEnd(draggingNode, dropNode, dropType, ev) {
				console.log(
					"tree drag end: ",
					dropNode && dropNode.label,
					dropType
				);
			},
			handleDrop(draggingNode, dropNode, dropType, ev) {
				console.log("tree drop: ", dropNode.label, dropType);
			},
			allowDrop(draggingNode, dropNode, type) {
				if (dropNode.data.label === "Level two 3-1") {
					return type !== "inner";
				} else {
					return true;
				}
			},
			allowDrag(draggingNode) {
				return (
					draggingNode.data.label.indexOf("Level three 3-1-1") === -1
				);
			},
		};
		// 页面加载完成
		onMounted(() => {});
		// 页面销毁完成
		onUnmounted(() => {});

		return {
			...refs,
			...options,
			// toRefs转换为响应式数据
			...toRefs(state),
			...methods,
		};
	},
});
</script>

<style lang="less" scoped>
.layer {
	height: 100%;
	.layer-header {
		height: 36px;
		line-height: 36px;
		background-color: #323232;
		font-size: 14px;
	}
	.layer-body {
		height: calc(100% - 36px);
	}
}
</style>

<style>
.el-tree.layer-tree {
	background-color: transparent;
}
</style>